<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Badge
    </ui:define>

    <ui:define name="description">
        Badge is a small status indicator for another element.
    </ui:define>

    <ui:param name="documentationLink" value="/components/badge"/>

    <ui:define name="implementation">
        <div class="card">
            <h:form>
	            <h5 class="mt-0">Numbers</h5>
	            <p:badge value="2" styleClass="mr-2"></p:badge>
	            <p:badge value="8" severity="success" styleClass="mr-2"></p:badge>
	            <p:badge value="4" severity="info" styleClass="mr-2"></p:badge>
	            <p:badge value="12" severity="warning" styleClass="mr-2"></p:badge>
	            <p:badge value="3" severity="danger" onclick="alert('danger clicked!')"></p:badge>

	            <h5 class="mb-4">Positioned Badge</h5>
	            <p:badge value="2">
	                <i class="pi pi-bell" style="font-size: 2rem"/>
	            </p:badge>
	            <p:badge value="10+" severity="danger">
	                <i class="pi pi-calendar ml-4" style="font-size: 2rem"/>
	            </p:badge>
	            <p:badge severity="danger">
	                <i class="pi pi-envelope ml-4" style="font-size: 2rem"/>
	            </p:badge>

	            <h5>Button Badge</h5>
	            <p:badge value="8">
	                <p:commandButton value="Emails"/>
	            </p:badge>
	            <p:badge value="8" severity="danger">
	                <p:commandButton value="Messages" icon="pi pi-users" styleClass="ml-4" />
	            </p:badge>

	            <h5>Sizes</h5>
	            <p:badge value="2" styleClass="mr-2"></p:badge>
	            <p:badge value="4" styleClass="mr-2" size="large" severity="warning"></p:badge>
	            <p:badge value="6" size="xlarge" severity="success"></p:badge>

	            <h5>Hidden</h5>
	            <p:badge value="0" visible="false">
	                <i class="pi pi-bell" style="font-size: 2rem"/>
	            </p:badge>
	            
	            <h5>Icon</h5>
                <p:badge icon="pi pi-bell" severity="danger">
                    <p:commandButton value="Alerts" />
                </p:badge>
                <p:badge icon="pi pi-envelope" severity="danger">
                    <p:commandButton value="Emails" styleClass="ml-4"/>
                </p:badge>
                <p:badge icon="pi pi-plus" iconPos="left" value=" 99" severity="danger" >
                    <p:commandButton value="Left Icon" styleClass="ml-4"/>
                </p:badge>
                <p:badge icon="pi pi-plus" iconPos="right" value="99 " severity="danger">
                    <p:commandButton value="Right Icon" styleClass="ml-4"/>
                </p:badge>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
